<template>
  <div id="app">
    <AicUpload
      name="avatar"
      action=""
      :file-list="fileList"
      :limit="2"
      :accept="accept"
      :multiple="true"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-progress="handleProgress"
      :before-upload="beforeUpload"
    >
      <AicButton type="primary">点击上传</AicButton>
      <div slot="tip">只能上传png，且不超过500K</div>
    </AicUpload>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      accept: 'image/png',
      fileList: [
        {
          url: '',
          name: ''
        }
      ]
    }
  },
  methods: {
    handleExceed(files, fileList) {
      console.log('超过最大上传数量了')
      console.log('file >>> ', files, fileList)
    },
    handleChange(file) {
      console.log(file)
    },
    handleSuccess() {},
    handleError() {},
    handleProgress() {},
    beforeUpload(rawFile) {
      const limitSize = rawFile.size / 1024 > 500
      if (limitSize) {
        console.log('当前超过了最大限制')
        return false
      } else if (this.accept) {
        if (!rawFile.name.endsWith('.png')) {
          console.log('文件类型不对')
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss">
#app {
  width: 80%;
  margin: 0 auto;
}
</style>
